<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="60%" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:700px;overflow:auto;">
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="保养任务单号" prop="planNo">
                        <el-input v-model="planNo" clearable readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保养设备名称" prop="device_title">
                        <el-input v-model="device_title" clearable readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保养人" prop="admin_names">
                        <el-input v-model="admin_names" clearable readonly placeholder="保养人"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="8">
                    <el-form-item label="保养部门" prop="dept_name">
                        <el-input v-model="dept_name" placeholder="保养部门" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保养开始时间" prop="task_start_date">
                        <!-- <el-date-picker v-model="form.task_start_date" :value-format="'YYYY-MM-DD'" placeholder="开始时间" style="width:100%" type="date" /> -->
                        <el-date-picker v-model="form.task_start_date" type="datetime" placeholder="请选择开始时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="保养结束时间" prop="task_end_date">
                        <!-- <el-date-picker v-model="form.task_end_date" :value-format="'YYYY-MM-DD'" placeholder="结束时间" style="width:100%" type="date" /> -->
                        <el-date-picker v-model="form.task_end_date" type="datetime" placeholder="请选择开始时间" format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" style="width:100%" value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="保养详情 " prop="item">
                <sc-form-table ref="table" v-model="form.item" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd hideDelete>
                    <el-table-column prop="field" label="保养项" align="center"></el-table-column>
                    <el-table-column prop="ask" label="保养标准" align="center"></el-table-column>
                    <!-- <el-table-column prop="type" label="类型" align="center">
                        <template #default="scope">
                            <el-select v-model="scope.row.type" placeholder="请选择" disabled>
                                <el-option label="状态值" :value="1"></el-option>
                                <el-option label="范围值" :value="2"></el-option>
                                <el-option label="固定值" :value="3"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="need" label="上限" align="center"></el-table-column>
                    <el-table-column prop="need1" label="下限" align="center"></el-table-column>
                    <el-table-column prop="detail_item_type" label="参数值" align="center">
                        <template #default="{row}">
                            <el-input v-if="row.detail_item_type == 1" v-model="row.value" placeholder="状态值" clearable autocomplete="off"></el-input>
                            <el-input v-else-if="row.detail_item_type==2" v-model="row.value" placeholder="范围值" clearable autocomplete="off"></el-input>
                            <el-input v-else v-model="row.value" placeholder="固定值" clearable autocomplete="off"></el-input>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="sta" label="是否完成保养" align="center">
                        <template #default="scope">
                            <el-switch :active-value="0" :inactive-value="1" v-model="scope.row.sta"></el-switch>
                        </template>
                    </el-table-column>
                </sc-form-table>
            </el-form-item>
            <el-col :span="12">
                <el-form-item label="保养设备照片" prop="img">
                    <sc-upload-multiple v-model="form.img" draggable></sc-upload-multiple>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" clearable></el-input>
                </el-form-item>
            </el-col>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增保养',
				edit: '新增保养',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
                id:"",
				task_id: "",
				yes: "",
				no: "",
                img:"",
				item: [],
                task_start_date:"",
                task_end_date:"",
			},
            admin_names:"",
            dept_name:"",
			//验证规则
			rules: {
				// title: [
				// 	{ required: true, message: '请输入保养记录名称' }
				// ],
				// code: [
				// 	{ required: true, message: '请输入保养记录编号' }
				// ],
			},
            addTemplate:{
                item_id:"",
                value:"",
                type:"",
            },
            taskList:[],
            planNo:"",
            device_title:"",
		}
	},
	mounted() {
        // this.getTask()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            let okNum = 0
            this.form.item.map(item=>{
                if(item.sta==0){
                    okNum +=1
                }
            })
            this.form.yes = okNum
            this.form.no = this.form.item.length - okNum
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					res = await this.$API.device.ProjectLog.add.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.task_id = data.id
            var res = await this.$API.device.ProjectTask.detail.post({id:data.id});
            let array = []
            res.data.item.map(item=>{
                array.push({
                    field:item.field,
                    ask:item.ask,
                    // type:Number(item.type),
                    // need:item.need,
                    // need1:item.need1,
                    sta:""
                })
            })
             this.form.item = array
             this.form.task_id = data.id
             this.device_title = res.data.device_title
             this.planNo = res.data.code
             this.admin_names = res.data.admin_names
             this.dept_name = res.data.dept_name
		},
	}
}
</script>

<style></style>
